<template>
  <div class="app-container">
    <div class="divBox">
      <el-row :gutter="24" class="dashboard-console-grid ivu-mb mb10">
        <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
          <el-card :bordered="false" dis-hover class="echart-card">
            <div slot="header">
              <div class="acea-row row-middle">
                <span class="title">
                  <el-avatar
                    icon="el-icon-s-operation"
                    size="small"
                    style="
                        color: #1890ff;
                        background: #e6f7ff;
                        font-size: 13px;
                      "
                  />
                  <span class="ivu-pl-8">改造项目统计</span>
                </span>
              </div>
            </div>
            <div id="pieChart" style="width: 100%;height:220px;"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="search-container">
      <el-form inline>
        <el-form-item label="名称">
          <el-input />
        </el-form-item>
        <el-button type="primary">搜索</el-button>
      </el-form>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column
        label="项目名称（改造老人姓名）"
        width="200px"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="项目编号">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="项目地点">
        <template slot-scope="scope">
          {{ scope.row.place }}
        </template>
      </el-table-column>
      <el-table-column label="项目类型">
        <template slot-scope="scope">
          {{ scope.row.type }}
        </template>
      </el-table-column>
      <el-table-column label="项目负责人" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.author }}</span>
        </template>
      </el-table-column>

      <el-table-column
        class-name="status-col"
        label="项目状态"
        width="110"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusFilter">{{
            scope.row.status | statusFilterLabel
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="开始时间" width="180" align="center">
        <template slot-scope="scope">
          {{ scope.row.display_time }}
        </template>
      </el-table-column>
      <el-table-column label="预计完成时间" width="180" align="center">
        <template slot-scope="scope">
          {{ scope.row.display_time }}
        </template>
      </el-table-column>
      <el-table-column label="完成时间" width="180" align="center">
        <template slot-scope="scope">
          {{ scope.row.display_time }}
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" prop="created_at" label="Display_time" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.display_time }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" width="240" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button type="success" size="mini" @click="detail(scope.row)"
            >详情</el-button
          >
          <el-button type="warning" size="mini" @click="apply(scope.row)"
            >验收</el-button
          >
          <el-button type="danger" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :visible.sync="dialogVisible"
      :title="title"
      width="1000px"
      center
    >
      <el-form
        ref="form"
        :model="form"
        label-width="120px"
        inline
        size="small"
        class="form-dialog"
      >
        <el-table
          :data="listData"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          style="margin:20px 0"
        >
          <el-table-column label="人员" width="100" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.user"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="改造时间" min-width="180" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.time"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="改造内容" min-width="180" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.desc"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="改造前" min-width="140" align="center">
            <template slot-scope="scope">
              <el-image
                v-if="scope.row.img1"
                :src="scope.row.img1"
                alt=""
                class="img-class"
                fit="contain"
                :preview-src-list="[scope.row.img1]"
              />
              <el-upload
                v-else
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                multiple
                :limit="3"
                :on-exceed="handleExceed"
                :file-list="fileList"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </template>
          </el-table-column>
          <el-table-column label="改造后" min-width="140" align="center">
            <template slot-scope="scope">
              <el-image
                v-if="scope.row.img2"
                :src="scope.row.img2"
                alt=""
                class="img-class"
                fit="contain"
                :preview-src-list="[scope.row.img2]"
              />
              <el-upload
                v-else
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                multiple
                :limit="3"
                :on-exceed="handleExceed"
                :file-list="fileList"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            width="180"
            align="center"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                type="success"
                size="mini"
                @click="operate('edit', scope.row)"
                >修改</el-button
              >
              <el-button type="danger" size="mini" @click="delRow(scope.$index)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" @click="addRow">添加</el-button>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="onCancel">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getList } from "@/api/table";
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: "success",
        1: "gray",
        2: "danger",
        3: "warning"
      };
      return statusMap[status];
    },
    statusFilterLabel(status) {
      const statusMap = {
        0: "进行中",
        1: "已完成",
        2: "暂停",
        3: "待启动"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      data: [
        {
          name: "张三",
          type: "基础类",
          author: "李响",
          display_time: "2023-12-24 16:10:10",
          id: "2104623",
          pageviews: 1165,
          status: 0,
          place: "拱墅区"
        },
        {
          name: "李四",
          type: "完善类",
          author: "李响",
          display_time: "2023-12-24 16:10:10",
          id: "2104622",
          pageviews: 1165,
          status: 1,
          place: "拱墅区"
        },
        {
          name: "王五",
          type: "提升类",
          author: "李响",
          display_time: "2023-12-24 16:10:10",
          id: "2104628",
          pageviews: 1165,
          status: 2,
          place: "拱墅区"
        }
      ],
      dialogVisible: false,
      title: "改造详情",
      personList: [{ label: "张三", value: "0" }],
      numList: [
        { label: "每年", value: "0" },
        { label: "每月", value: "1" },
        { label: "每日", value: "2" }
      ],
      typeList: [
        { label: "消防安全", value: "0" },
        { label: "食堂安全", value: "1" },
        { label: "护工查房", value: "2" }
      ],
      form: {},
      checkList: ["日常清洁", "定期体检", "心理咨询"],
      medicalData: [],
      pieChart: null,
      listData: [
        {
          name: "张三",
          user: "李响",
          logo: "",
          sex: "女",
          tel: "13788890000",
          role: "项目负责人",
          dept: "项目部",
          position: "部门经理",
          time: "2023-12-24 16:10:10",
          status: 2,
          endtime: "",
          desc: "地板改造",
          img1: require("../../assets/images/gz1.png"),
          img2: require("../../assets/images/gz2.png")
        },
        {
          user: "李响",
          name: "李四",
          logo: "",
          sex: "男",
          tel: "13788890000",
          role: "评估员",
          dept: "管理部",
          position: "员工",
          time: "2023-12-24 16:10:10",
          status: 0,
          endtime: "",
          desc: "厨房改造",
          img1: require("../../assets/images/gz3.png"),
          img2: require("../../assets/images/gz4.png")
        },
        {
          user: "李响",
          name: "王五",
          logo: "",
          sex: "男",
          tel: "13788890000",
          role: "施工人员",
          dept: "服务部",
          position: "员工",
          time: "2023-12-24 16:10:10",
          status: 1,
          endtime: "2023-12-24 16:10:10",
          desc: "卫生间改造",
          img1: require("../../assets/images/gz5.png"),
          img2: require("../../assets/images/gz6.png")
        }
      ]
    };
  },
  created() {
    this.fetchData();
    this.$nextTick(() => {
      // this.getData()
      this.initChart();
    });
  },
  mounted() {
    this.initChart();
    this.__resizeHandler = () => {
      setTimeout(() => {
        if (this.pieChart) {
          this.pieChart.resize();
        }
      }, 100);
    };
    window.addEventListener("resize", this.__resizeHandler);
  },
  beforeDestroy() {
    if (this.pieChart) {
      window.removeEventListener("resize", this.__resizeHandler);
      this.pieChart.dispose();
      this.pieChart = null;
    }
  },
  methods: {
    initChart() {
      this.chartPie();
    },
    fetchData() {
      this.listLoading = true;
      this.list = this.data;
      this.listLoading = false;
      // getList().then(response => {
      //   this.list = response.data.items
      //   this.listLoading = false
      // })
    },
    operate(type) {
      if (type === "add") {
        this.dialogVisible = true;
      }
    },
    detail(row) {
      this.form = row;
      this.dialogVisible = true;
    },
    fileDetail(row) {
      this.$router.push({ name: "ProjectDetail" });
    },
    onSubmit() {
      this.$message("submit!");
    },
    onCancel() {
      this.dialogVisible = false;
    },
    chartPie() {
      var chartDom = document.getElementById("pieChart");
      this.pieChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "horizontal",
          bottom: "bottom"
        },
        // itemStyle: {
        //   borderRadius: 5,
        //   borderColor: "#fff",
        //   borderWidth: 10
        // },
        series: [
          {
            name: "人数",
            type: "pie",
            radius: ["40%", "70%"],
            center: ["50%", "38%"],
            data: [
              { value: 148, name: "地面改造" },
              { value: 73, name: "门改造" },
              { value: 58, name: "卧室改造" },
              { value: 58, name: "如厕洗浴设备改造" },
              { value: 58, name: "厨房设备改造" },
              { value: 58, name: "物理环境改造" },
              { value: 58, name: "老年用品配置" }
              //地面改造 ；    门改造； 卧室改造；如厕洗浴设备改造；厨房设备改造；物理环境改造；老年用品配置
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };

      option && this.pieChart.setOption(option);
    },
    addRow() {
      this.listData.push({});
    },
    delRow(index) {
      this.listData.splice(index, 1);
    }
  }
};
</script>
<style scoped lang="scss">
.line {
  text-align: center;
}
.form-dialog {
  .title {
    margin-bottom: 20px;
    font-weight: 600;
    left: -5px;
  }
  .title::before {
    content: "";
    width: 3px;
    height: 16px;
    position: absolute;
    margin: 0 -5px;
    background: rgb(32, 125, 255);
  }
}
.img-class {
  width: 68px;
  height: 68px;
}
.medical-row {
  ::v-deep.el-form-item__content {
    width: 80%;
  }
}
.divBox {
  .ivu-mb {
    margin-bottom: 10px;
  }
}
.acea-row {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .title {
    display: flex;
    align-items: center;
  }

  ::v-deep.el-avatar--small {
    width: 22px;
    height: 22px;
    line-height: 22px;
  }
}
</style>
